@use '../tp';

.#{tp.$prefix}-p2dpv {
	padding-left: calc(#{tp.cssVar('container-unit-size')} + 4px);

	// Pad
	&_p {
		@extend %tp-input;

		cursor: crosshair;
		height: 0;
		overflow: hidden;
		padding-bottom: 100%;
		position: relative;
	}
	&.#{tp.$disabled} &_p {
		opacity: 0.5;
	}
	// Graphics
	&_g {
		display: block;
		height: 100%;
		left: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		width: 100%;
	}
	// Axis
	&_ax {
		opacity: 0.1;
		stroke: tp.cssVar('input-fg');
		stroke-dasharray: 1;
	}
	// Line
	&_l {
		opacity: 0.5;
		stroke: tp.cssVar('input-fg');
		stroke-dasharray: 1;
	}
	// Marker
	&_m {
		border: tp.cssVar('input-fg') solid 1px;
		border-radius: 50%;
		box-sizing: border-box;
		height: 4px;
		margin-left: -2px;
		margin-top: -2px;
		position: absolute;
		width: 4px;
	}
	&_p:focus &_m {
		background-color: tp.cssVar('input-fg');
		border-width: 0;
	}
}
